<template>
  <div class="gh-list-item">
    <div class="gh-list-item-top">
      <div class="gh-list-item-top-name">
        {{ item.label }}
      </div>
      <div class="gh-list-item-top-val">
        <span class="gh-list-item-top-val-num">{{
          item.num
        }}</span
        >公顷
      </div>
    </div>
    <div class="gh-list-item-line">
      <div
        class="gh-list-item-line-inner"
        :style="{ width: width }"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object
    },
    max: {
      type: Number
    }
  },
  computed: {
    width() {
      if (this.item.num === 0) {
        return '0%'
      } else if (this.item.num === this.max) {
        return '100%'
      } else {
        console.log('-', this.item.num / this.max)
        return (this.item.num / this.max) * 100 + '%'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.gh-list-item {
  width: 100%;
  &-top {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    &-name {
      font-size: 12px;
      line-height: 12px;
      font-weight: 400;
      color: #000000;
    }
    &-val {
      font-size: 12px;
      line-height: 12px;
      font-weight: 400;
      color: #000000;
      &-num {
        font-size: 12px;
        line-height: 12px;
        font-family: DIN;
        font-weight: bold;
        color: #000000;
        margin-right: 3px;
      }
    }
  }
  &-line {
    width: 100%;
    height: 6px;
    background-color: #cdced3;
    margin-top: 4px;
    &-inner {
      width: 0px;
      height: 6px;
      background: linear-gradient(-90deg, #5ab9f8, #419edc);
    }
  }
}
</style>
